<template>
	<view class="body">
		<StepBar :TabIndex="TabIndex"></StepBar>
		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="comlum_box">
				<StepOne v-if="!TabIndex" @openService="openService" @changeAvatar="changeAvatar" @openArea="openArea"
					@addImage="addImage" :domainNameList="skilled" :shopList="shop" @close="closeImgList" @changeNickname="changeNickname"
					 @experienceShow="changExperienceShow" :query="becomeQuery" @changeBio="changeBio"></StepOne>
				<StepTwo v-else-if="TabIndex == 1" :query="becomeQuery" :sexList="sexparams" @changeName="changeName" @changeIdentity="changeIdentity" @uploadfront="uploadfront" @changeSexShow="changeSexShow" @birthShow="changBirthShow"></StepTwo>
				<StepThree v-else :query="becomeQuery" @uploadCertImg="uploadCertImg"  @changeModle="changeModle" @changeWechat="changeWechat" @changeWechatImage="changeWechatImage" @certClose="certClose"></StepThree>
			</view>
		</scroll-view>


		<view class="foot">
			<view class="btn" @click="addIndex(TabIndex)" v-if="!TabIndex">
				下一步
			</view>
			<view class="btn2" v-if="TabIndex == 1 || TabIndex == 2" @click="minusIndex(TabIndex)">
				上一步
			</view>
			<view class="btn2" v-if="TabIndex == 1" @click="addIndex(TabIndex)">
				下一步
			</view>
			<view class="btn2" v-if="TabIndex == 2" @click="routeResult">
				提交申请
			</view>
		</view>
		<popupVue :title="'选择服务门店'" @close="shopClose" @sure="shopSure" :couponShow="couponShow">
			<view class="comlum_Y2">
				<u-search placeholder="搜索门店" :show-action="false" shape="square" class="search-input" v-model="shopQuery.search" @change="getshop"></u-search>
				<scroll-view scroll-y="true" class="scroll-Y2">
					<view class="comlum_Y3">
						<view v-for="(item,index) in shop" :key="index" class="Item"
							@click="changeShopIndex(item, index)">
							<view class="the_left">
								<image :src="$IMG_URL('/static/home/Boutique.png')" mode="" class="icon"></image>
								<view class="name">
									{{item.shop_name}}
								</view>
							</view>
							<image
								:src="item.sure ?$IMG_URL('/static/member/agreement2.png'):$IMG_URL('/static/member/agreement1.png')"
								mode="" class="radio"></image>
						</view>
					</view>
					<view class="empty">

					</view>
				</scroll-view>
			</view>
		</popupVue>
		<popupVue :title="'选择擅长领域'" @close="skilledClose" @sure="skilledSure" :couponShow="skilledShow">
			<view class="comlum_Y2">
				<scroll-view scroll-y="true" class="scroll-Y3">
					<view class="comlum_Y4">
						<view v-for="(item,index) in skilled" :key="index" class="com_Item">
							<view class="title">
								{{item.title}}
							</view>
							<view class="row">
								<view v-for="(childItem,childIndex) in item.territory" :key="childIndex" class="field"
									:class="[(childIndex + 1) % 4 === 0 ? '' : 'mr',childItem.sure ?'Activefield':'field']"
									@click="changField(childItem,childIndex, index)">
									{{childItem.domain}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</popupVue>
		<u-picker mode="time" v-model="calendarShow" :params="params" :customTimeTag="true" :title="'出生日期'"
			:popupheight="'786rpx'" :borderRadius="16" @confirm="changeCalendar"></u-picker>
		<u-picker mode="time" v-model="experienceShow" :params="params" :customTimeTag="true" :title="'入行时间'"
			:popupheight="'786rpx'" :borderRadius="16" @confirm="changeExperience"></u-picker>
		<u-picker  v-model="sexShow" mode="selector" :range="sexparams" :customTimeTag="true" :title="'性别'"
			:popupheight="'786rpx'" :borderRadius="16" @confirm="changeSex"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import StepBar from './components/Step_bar.vue'
	import StepOne from './components/Step_one.vue'
	import StepTwo from './components/Step_Two.vue'
	import StepThree from './components/Step_three.vue'
	import popupVue from '@/components/popup.vue'
	import {
		coachInfo,
		domain,
		shop,
		submit
	} from '@/api/apply.js'
	export default {
		components: {
			StepBar,
			StepOne,
			StepTwo,
			StepThree,
			popupVue
		},
		data() {
			return {
				// 步骤
				TabIndex: 0,
				experienceShow: false,
				calendarShow: false,
				couponShow: false,
				skilledShow: false,
				sexShow:false,
				shop: [],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				sexparams:['女', '男'],
				// shopIndex: 0,
				becomeQuery: {
					avatar: '',
					nickname:'',
					remark: '',
					working: '',
					bio: '',
					mobile: "",
					wechat: '',
					wechat_image: '',
					rx_identity_image: '',
					gh_identity_image: '',	
					name: '',
					gender: '',
					identity: '',
					birthday: '',
					publicity_image_list: [],
					cert_image_list: [],
					shop_id_list: [],
					domain_id_list: []
				},
				skilled: [],
				shopQuery:{
					search:''
				}
			}
		},
		created() {
			this.getdomain()
			this.getshop()
		},
		onLoad() {
			this.getcoachInfo()
		},
		methods: {
			changeSexShow(){
				this.sexShow = true
			},
			changeModle(e){
				this.becomeQuery.mobile = e
			},
			changeWechat(e){
				this.becomeQuery.wechat = e
			},
			changeSex(e){
				console.log('e', e);
				this.becomeQuery.gender = e[0]
			},
			changeNickname(e){
				this.becomeQuery.nickname = e
			},
			changeBio(e){
				this.becomeQuery.bio = e
			},
			changeIdentity(e){
				this.becomeQuery.identity = e
			},
			changeName(e){
				this.becomeQuery.name = e
			},
			closeImgList(e) {
				console.log('e', e);
				this.becomeQuery.publicity_image_list.splice(e, 1)
			},
			certClose(e){
				this.becomeQuery.cert_image_list.splice(e, 1)
			},
			getshop() {
				shop(this.shopQuery).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.shop = res.data
					}
				})
			},
			getdomain() {
				domain().then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.skilled = res.data.list
					}
				})
			},
			changeWechatImage(){
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: function(res) {
						that.$UPLOADIMAGE(res.tempFilePaths[0], 'apply').then(imgUrl => {
							console.log('imgUrl', imgUrl);
							that.becomeQuery.wechat_image = imgUrl
						})
					},
				});
			},
			uploadfront(e){
				console.log('e', e);
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: function(res) {
						that.$UPLOADIMAGE(res.tempFilePaths[0], 'avatar').then(imgUrl => {
							console.log('imgUrl', imgUrl);
							if(e == 'uploadfront1'){
								that.becomeQuery.rx_identity_image = imgUrl;
							}else{
								that.becomeQuery.gh_identity_image = imgUrl;
							}
						})
					},
				});
			},
			uploadCertImg(){
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: function(res) {
						res.tempFilePaths.forEach(i=>{
							that.$UPLOADIMAGE(i, 'apply').then(imgUrl => {
								console.log('imgUrl', imgUrl);
								that.becomeQuery.cert_image_list.push(imgUrl)
								// that.$forceUpdate()
							})
						})	
					},
				});
			},
			addImage() {
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: function(res) {
						console.log('res', res);
						res.tempFilePaths.forEach(i=>{
							that.$UPLOADIMAGE(i, 'apply').then(imgUrl => {
								console.log('imgUrl', imgUrl);
								that.becomeQuery.publicity_image_list.push(imgUrl)
								// that.$forceUpdate()
							})
						})
						
					},
				});
			},
			changeAvatar() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: function(res) {
						that.$UPLOADIMAGE(res.tempFilePaths[0], 'avatar').then(imgUrl => {
							that.becomeQuery.avatar = imgUrl;
							that.$forceUpdate()
						})
					},
				});
			},
			getcoachInfo() {
				coachInfo().then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.becomeQuery = res.data
					}
				})
			},

			changField(childItem, childIndex, index) {
				this.$set(this.skilled[index].territory[childIndex], 'sure', !this.skilled[index].territory[childIndex]
					.sure);
			},
			addIndex(data) {
				console.log('data', data);
				this.becomeQuery.step = data + 1
				uni.showLoading()
				submit(this.becomeQuery).then(({
					data: res
				}) => {
					if (res.code == 1) {
						console.log('res', res);
						this.TabIndex++
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							icon:false
						})
					}
				}).finally(err=>{
					uni.hideLoading()
				})
				
			},
			minusIndex(index) {
				this.TabIndex--
			},
			openService() {
				this.couponShow = true
			},
			openArea() {
				this.skilledShow = true
			},
			shopClose() {
				this.couponShow = false
			},
			shopSure() {
				this.becomeQuery.shop_id_list = []
				this.shop.forEach((skill, index) => {
					if (skill.sure) {
						this.becomeQuery.shop_id_list.push(skill.shop_id);
					}
				});
				console.log('this.becomeQuery.shop_id_list', this.becomeQuery.shop_id_list);
				this.couponShow = false
			},
			changeShopIndex(item, index) {
				// this.shopIndex = index
				this.$set(this.shop[index], 'sure', !this.shop[index].sure);
			},
			skilledSure() {
				this.becomeQuery.domain_id_list = []
				// 遍历this.skilled数组（假设它是一个数组）
				this.skilled.forEach((skill, index) => {
					// 遍历每个skill的territory数组
					skill.territory.forEach((territory, childIndex) => {
						// 如果territory的sure属性为true
						if (territory.sure) {
							// 你可以直接将territory对象添加到sureData数组中
							// 或者你可以创建一个新的对象或只包含你需要的属性
							this.becomeQuery.domain_id_list.push(territory
							.domain_id); // 或者 territory 的某个子集，如 { ...territory, index, childIndex }
						}
					});
				});
				this.skilledShow = false
			},
			skilledClose() {
				this.skilledShow = false
			},
			changBirthShow() {
				this.calendarShow = true
			},
			changExperienceShow() {
				this.experienceShow = true
			},
			changeExperience(e) {
				console.log('e', e);
				this.becomeQuery.working = e.year + '-' + e.month + '-' + e.day
			},
			changeCalendar(e) {
				console.log('e', e);
				this.becomeQuery.birthday = e.year + '-' + e.month + '-' + e.day
			},
			routeResult() {
				this.becomeQuery.step = 3
				uni.showLoading()
				submit(this.becomeQuery).then(({
					data: res
				}) => {
					if (res.code == 1) {
						console.log('res', res);
						uni.navigateTo({
							url: 'result'
						})
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							icon:false
						})
					}
				}).finally(err=>{
					uni.hideLoading()
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;

		.scroll-Y {
			height: 82vh;
			width: 100%;

			.comlum_box {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.empty {
			width: 750rpx;
			height: 160px;
		}

		.foot {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 160rpx;
			background: #ffffff;
			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			padding-top: 10rpx;

			.btn {
				width: 710rpx;
				height: 88rpx;
				background: #73F0EA;
				border-radius: 16rpx;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn1 {
				width: 346rpx;
				height: 88rpx;
				border: 1rpx solid #73F0EA;
				border-radius: 16rpx;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #73F0EA;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn2 {
				width: 346rpx;
				height: 88rpx;
				background: #73F0EA;
				border-radius: 16rpx;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.comlum_Y2 {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.search-input {
				width: 702rpx;
				height: 66rpx;
			}

			.scroll-Y2 {
				width: 100%;
				height: 58vh;

				.comlum_Y3 {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-top: 24rpx;

					.Item {
						width: 702rpx;
						height: 88rpx;
						background: #f6f6f6;
						border-radius: 16rpx;
						padding: 0 24rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 24rpx;

						.the_left {
							flex: 1;
							display: flex;
							flex-direction: row;
							align-items: center;

							.icon {
								width: 106rpx;
								height: 32rpx;
								margin-right: 12rpx;
							}

							.name {
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #333333;
							}
						}

						.radio {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}

				.empty {
					height: 110rpx;
					width: 100%;
				}
			}

			.scroll-Y3 {
				width: 100%;
				height: 60vh;

				.comlum_Y4 {
					width: 100%;
					display: flex;
					flex-direction: column;
					padding: 0 40rpx;

					.com_Item {
						display: flex;
						flex-direction: column;
						margin-bottom: 48rpx;
						width: 100%;

						.title {
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #333333;
							margin-bottom: 32rpx;
						}

						.row {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							width: 100%;

							.mr {
								margin-right: 10rpx;
							}

							.field {
								padding: 0 24rpx;
								height: 72rpx;
								background: #f6f6f6;
								border-radius: 16rpx;
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								color: #333333;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-bottom: 10rpx;
								border: 2rpx solid #f6f6f6;
							}

							.Activefield {
								padding: 0 24rpx;
								height: 72rpx;
								background: rgba(129, 202, 197, 0.10);
								border: 2rpx solid #73F0EA;
								border-radius: 16rpx;
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								color: #73F0EA;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-bottom: 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>